<!DOCTYPE html>
<html lang="zh">

<head>
	{% load static %}
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="{% static '/img/favicon.ico' %}" type="image/x-icon">
	<title>{{ title }}</title>
	<script src="{% static '/js/base_ajax.js' %}"></script>
	<script src="{% static '/js/jquery.min.js' %}"></script>
	<script src="{% static '/js/base.js' %}"></script>

	<!-- 加载中 -->
	<script src="{% static '/js/Sonic.js' %}"></script>
	<script src="{% static '/js/loading.js' %}"></script>
	<!-- 消息弹窗 -->
	<script src="{% static '/js/dream-msg.min.js' %}"></script>
	<script src="{% static '/js/tips.js' %}"></script>



	<!-- 统计图 -->
	<script src="{% static '/js/cartogram.js' %}"></script>


	<!-- 加载中 -->
	<link rel="stylesheet" type="text/css" href="{% static '/css/loading.css' %}">
	<!-- 消息弹窗 -->
	<link rel="stylesheet" type="text/css" href="{% static '/css/tips.css' %}">

	<link rel="stylesheet" type="text/css" href="{% static '/css/default.css' %}">



	{% block module %}
	{% endblock %}
	<!-- 加载中 -->
	<style>
		#container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: rgba(112, 128, 144, 0.3);
			z-index: 99999;
			display: none;
		}

		div.l {
			align: center;
			height: 150px;
			width: 150px;
			position: relative;
		}

		canvas {
			display: block;
		}
	</style>
</head>

<body>

	{% block body %}
	{% endblock %}
	<!-- 加载中 -->
	<div id="container"></div>

	<!-- 加载脚本 -->
	<script>
		$("body").css("height", adjust_height());
		function loading() {
			// 设置蒙层高度
			let maskLayer = document.getElementById('container');
			maskLayer.style.height = adjust_height();
			$("#container").show();



			var loader = {

				width: 100,
				height: 100,
				stepsPerFrame: 1,
				trailLength: 1,
				pointDistance: .02,
				fps: 30,
				fillColor: '#05E2FF',

				step: function (point, index) {

					this._.beginPath();

					this._.moveTo(point.x, point.y);

					this._.arc(point.x, point.y, index * 7, 0, Math.PI * 2, false);

					this._.closePath();

					this._.fill();

				},

				path: [

					['arc', 50, 50, 30, 0, 360]

				]



			};



			var d, a, container = document.getElementById('container');



			d = document.createElement('div');

			d.className = 'l';
			d.style.overflow = "hidden ";
			d.style.width = "100%";
			d.style.height = adjust_height();

			a = new Sonic(loader);

			d.appendChild(a.canvas);

			container.appendChild(d);

			a.canvas.style.margin = "20% auto";


			a.play();
		}
	</script>
</body>

</html>